<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">主题乐园</el-breadcrumb-item>
      <el-breadcrumb-item>甜品王国</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <TopicSwiper :swiperOptions="oceanSwiper">
        <TopicSwiperItem
          v-for="(item, index) in swiperList"
          :key="index"
          class="swiper-item"
        >
          <el-radio v-model="radio" :label="index + 1">
            <el-card
              :class="radio == index + 1 ? 'checked' : ''"
              :body-style="{ padding: '0px', width: '210px', height: '369px' }"
            >
              <img :src="item.imgUrl" width="210" height="279" class="image" />
              <div class="describe" style="padding: 14px">
                <h2 :class="radio == index + 1 ? 'h2_border' : ''">
                  {{ index | indexFilter(index) }}
                </h2>
                <div>
                  <p class="title">{{ item.title }}</p>
                  <p class="start">
                    欢乐指数：<span v-for="i in item.startNum" :key="i">★</span>
                  </p>
                </div>
              </div>
            </el-card>
          </el-radio>
        </TopicSwiperItem>
      </TopicSwiper>
      <div style="margin-top: 30px">
        <div style="width: 685px; float: left">
          <el-carousel height="356px" v-if="radio == 1">
            <el-carousel-item v-for="(item, index) in carousel_1" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 2">
            <el-carousel-item v-for="(item, index) in carousel_2" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 3">
            <el-carousel-item v-for="(item, index) in carousel_3" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <img
            :src="carousel_4.imgUrl"
            alt=""
            v-if="radio == 4"
            height="356px"
            width="685px"
          />
          <img
            :src="carousel_5.imgUrl"
            alt=""
            v-if="radio == 5"
            height="356px"
            width="685px"
          />
          <el-carousel height="356px" v-if="radio == 6">
            <el-carousel-item v-for="(item, index) in carousel_6" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <img
            :src="carousel_7.imgUrl"
            alt=""
            v-if="radio == 7"
            height="356px"
            width="685px"
          />
          <img
            :src="carousel_8.imgUrl"
            alt=""
            v-if="radio == 8"
            height="356px"
            width="685px"
          />
          <img
            :src="carousel_9.imgUrl"
            alt=""
            v-if="radio == 9"
            height="356px"
            width="685px"
          />
          <el-carousel height="356px" v-if="radio == 10">
            <el-carousel-item v-for="(item, index) in carousel_10" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 11">
            <el-carousel-item v-for="(item, index) in carousel_11" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content">
          <h3>{{ content_1.h3 | h3Filter() }}</h3>
          <div>
            <span>{{ content_1.span | spanFilter() }}</span>
          </div>
          <p>{{ content_1.p | pFilter() }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopicSwiper from "@/components/TopicSwiper.vue";
import TopicSwiperItem from "@/components/TopicSwiperItem.vue";

// 过滤器中使用data中的数据
// 1. 声明一个that变量
// 2. 在beforeCreate生命周期函数中将this赋值给that
// 3. 在过滤器中通过that.调用
let that;
export default {
  components: {
    TopicSwiper,
    TopicSwiperItem,
  },
  filters: {
    indexFilter(index) {
      let num = index + 1;
      console.log(num);
      if (num.toString().length == 1) {
        return "0" + num;
      }
      return num;
    },
    h3Filter() {
      return that[`content_${that.radio}`].h3;
    },
    spanFilter() {
      return that[`content_${that.radio}`].span;
    },
    pFilter() {
      return that[`content_${that.radio}`].p;
    },
  },
  data() {
    return {
      radio: "1",
      oceanSwiper: {
        slidesPerView: 5,
        spaceBetween: 30,
      },
      swiperList: [
        {
          imgUrl: require("@/assets/images/DessertKingdom-1.png"),
          title: "颠三倒四机",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-2.png"),
          title: "焦糖沙漠影院",
          startNum: 4,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-3.png"),
          title: "蛋糕皇宫",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-4.png"),
          title: "疯狂溜达车",
          startNum: 4,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-5.png"),
          title: "疯狂下午茶",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-6.png"),
          title: "梦幻棒棒糖",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-7.png"),
          title: "神圣时刻",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-8.png"),
          title: "棉花糖跳跳",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-9.png"),
          title: "甜蜜钟楼",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-10.png"),
          title: "靴子警局",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-11.png"),
          title: "奶酪泡泡馆",
          startNum: 3,
        },
      ],
      carousel_1: [
        {
          imgUrl: require("@/assets/images/DessertKingdom-1-1.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-1-2.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-1-3.png"),
        },
      ],
      carousel_2: [
        {
          imgUrl: require("@/assets/images/DessertKingdom-2-1.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-2-2.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-2-3.png"),
        },
      ],
      carousel_3: [
        {
          imgUrl: require("@/assets/images/DessertKingdom-3-1.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-3-2.png"),
        },
      ],
      carousel_4: {
        imgUrl: require("@/assets/images/DessertKingdom-4-1.png"),
      },
      carousel_5: {
        imgUrl: require("@/assets/images/DessertKingdom-5-1.png"),
      },
      carousel_6: [
        {
          imgUrl: require("@/assets/images/DessertKingdom-6-1.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-6-2.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-6-3.png"),
        },
      ],
      carousel_7: {
        imgUrl: require("@/assets/images/DessertKingdom-7-1.png"),
      },
      carousel_8: {
        imgUrl: require("@/assets/images/DessertKingdom-8-1.png"),
      },
      carousel_9: {
        imgUrl: require("@/assets/images/DessertKingdom-9-1.png"),
      },
      carousel_10: [
        {
          imgUrl: require("@/assets/images/DessertKingdom-10-1.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-10-2.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-10-3.png"),
        },
      ],
      carousel_11: [
        {
          imgUrl: require("@/assets/images/DessertKingdom-11-1.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-11-2.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-11-3.png"),
        },
        {
          imgUrl: require("@/assets/images/DessertKingdom-11-4.png"),
        },
      ],
      content_1: {
        h3: "颠三倒四机",
        strong: "",
        span: "项目特点： VR实感激战轨道车  欢乐指数： ★★★★★",
        p: "与饼干警长开启一场刺激而又疯狂的护城之旅吧！乘坐神奇轨道车开始互动射击，在VR魔法中开始惊奇历险。",
      },
      content_2: {
        h3: "焦糖沙漠影院",
        strong: "",
        span: "项目特点： 4D环幕特技影院  欢乐指数： ★★★★★",
        p: "电影原来如此好玩！“动漫实景+影像特技”的另类体验，让你在4D环幕下亲身感受不一样的战斗实景。",
      },
      content_3: {
        h3: "蛋糕皇宫",
        strong: "",
        span: "项目特点： 360度全景VR体验馆  欢乐指数： ★★★★★",
        p: "360度全景动画和超逼真视觉特效让你恍若置身动漫世界，体感游戏实时交互，精彩场景令人目不暇接。",
      },
      content_4: {
        h3: "疯狂溜达车",
        strong: "",
        span: "项目特点： 至尊合家欢过山车  欢乐指数： ★★★★",
        p: "火箭般极速冲刺，360°边缘倾斜极限转弯，忽又疯狂倒转，俯冲旋转的多重快感涌上心头，全家一起畅享无穷欢乐！",
      },
      content_5: {
        h3: "疯狂下午茶",
        strong: "",
        span: "项目特点： 激情炫舞转杯  欢乐指数： ★★★",
        p: "坐在咖啡杯里伴着美妙的音乐翩翩起舞、尽情旋转，激情离心速度让你幸福眩晕。",
      },
      content_6: {
        h3: "梦幻棒棒糖",
        strong: "",
        span: "项目特点： 甜蜜激战天空飞船  欢乐指数： ★★★",
        p: "梦幻棒棒糖旋转飞舞营造浪漫气氛，波动弹跳，不断起伏，最后飞向天空饱览甜品王国风光。",
      },
      content_7: {
        h3: "神圣时刻",
        strong: "",
        span: "项目特点： 高空失重弹跳机  欢乐指数： ★★★★",
        p: "跳动不停，尖叫不止，在地面和高空间上弹下跳。每一次甜蜜的蹦跶都能听到风从耳边呼啸而过。",
      },
      content_8: {
        h3: "棉花糖跳跳",
        strong: "",
        span: "项目特点： 梦幻魔力战车  欢乐指数： ★★★",
        p: "棉花糖欢快地起伏，飞跳，Q弹十足，就像乘上云朵在梦里飞翔，快来尽情感受吧。",
      },
      content_9: {
        h3: "甜蜜钟楼",
        strong: "",
        span: "项目特点： 轻蹦极体验机  欢乐指数： ★★★",
        p: "钟声敲响，快抓紧爸爸妈妈的手，感受轻蹦极的惊险刺激，让快乐的笑声如糖果雨般从钟楼洒下。",
      },
      content_10: {
        h3: "靴子警局",
        strong: "",
        span: "项目特点： 大型儿童攀爬馆  欢乐指数： ★★★★",
        p: "在靴子警局挑战攀爬，来回钻动，从滑梯上俯冲、直下，大型儿童攀爬设施让孩子们尽情打滚。",
      },
      content_11: {
        h3: "奶酪泡泡馆",
        strong: "",
        span: "项目特点： 室内亲子射击营  欢乐指数： ★★★",
        p: "泡泡子弹发射，使劲转动，向他们扫射！瞬间香甜爆炸，快乐简单纯粹，这就是童年的味道。",
      },
    };
  },
  computed: {},
  beforeCreate() {
    that = this;
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-breadcrumb {
  font-size: 21px;
  line-height: 2;
}

.checked {
  background-color: #f7b324;
  color: #fff;
}

.h2_border {
  border-right: 2px solid #fef2d8 !important;
}

::v-deep .el-radio__input {
  display: none;
}

.swiper-item {
  display: flex;
  flex-direction: column;

  .el-card {
    border-radius: 0 0 20px 20px;
  }

  .el-card:hover {
    background-color: #f7b324;
    color: #fff;
    cursor: pointer;
  }

  .el-card:hover h2 {
    border-right: 2px solid #fef2d8;
  }

  .describe {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    margin-top: 10px;

    h2 {
      border-right: 2px solid #575757;
      padding-right: 5px;
      margin-right: 10px;
    }

    .title {
      font-size: 16px;
      margin-bottom: 5px;
    }

    .start {
      font-size: 12px;
    }
  }
}

.content {
  background-color: #f7b324;
  border-radius: 10px;
  padding: 20px;
  margin-left: 705px;
  min-height: 316px;

  h3 {
    width: max-content;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    background-color: #d29004;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  > div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #df9f18;
    padding-bottom: 20px;
    padding-left: 5px;
    margin-bottom: 25px;
  }

  > p {
    line-height: 24px;
    padding-left: 5px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}
</style>
